<template>
  <div class="register">
    <!-- 导航栏 -->
    <van-nav-bar left-text="注册（修改密码）" left-arrow @click-left="onClickLeft" />

    <div class="main">
      <van-form @submit="getVerify">
        <!-- 输入手机号 -->
        <van-field
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          autocomplete="off"
          :rules="[
            {
              required: true,
              message: '请填写正确的手机号',
              pattern: phoneReg,
            },
          ]"
        />
        <!-- 输入密码 -->
        <van-field
          v-model="password"
          :type="isShow ? 'text' : 'password'"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :right-icon="isShow ? 'eye-o' : 'closed-eye'"
          @click-right-icon="showPassword"
          autocomplete="off"
          :rules="[
            {
              required: true,
              message: '必须以字母开头,6-16位字母数字下划线组合',
              pattern: passwordReg,
            },
          ]"
        />
        <!-- 输入用户名 -->
        <van-field
          v-model="nickName"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          autocomplete="off"
          :rules="[
            {
              required: true,
              message: '1-16位中英文数字下划线组合',
              pattern: nickNameReg,
            },
          ]"
        />

        <van-field
          v-model="code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              v-show="show"
              size="small"
              type="primary"
              @click="getSent"
            >
              发送验证码
            </van-button>

            <van-button v-show="!show" size="small" type="primary">
              {{ count }}秒后重新发送
            </van-button>
          </template>
        </van-field>

        <van-button round block type="info" native-type="submit">
          注册
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",

  data() {
    return {
      // 注册信息
      phone: "",
      password: "",
      nickName: "",

      code: "",
      count: "",
      timer: null,
      show: true,

      //是否明文显示密码
      isShow: false,

      //手机号正则
      phoneReg: /^1[3-9]\d{9}$/,

      //密码正则(必须以字母开头, 字母数字_组合[6-16])
      passwordReg: /^[A-Za-z]\w{5,15}$/,

      //昵称正则(中英文数字下划线组合[1-16])
      nickNameReg: /^[\u4e00-\u9fa5A-Za-z0-9_]{1,16}$/,
    };
  },

  methods: {
    //返回
    onClickLeft() {
      this.$router.push({ name: "Login" });
    },

    //显示密码
    showPassword() {
      this.isShow = !this.isShow;
    },

    //发送验证码
    getSent() {
      // 先检测手机号码是否已注册
      this.axios({
        method: "get",
        url: "/cellphone/existence/check",
        params: {
          phone: this.phone,
        },
      })
        .then((res) => {
          if (res.data.exist === 1) {
            this.$toast("该手机已注册");

            setTimeout(() => {
              this.$router.go(0);
            }, 2000);
          }

          //发送验证码
          else {
            this.axios({
              method: "get",
              url: "/captcha/sent",
              params: {
                phone: this.phone,
              },
            })
              .then((res) => {
                if (res.data.code === 200) {
                  this.$toast("成功发送");

                  let time_count = 60;

                  if (!this.timer) {
                    this.count = time_count;
                    this.show = false;
                    this.timer = setInterval(() => {
                      if (this.count > 0 && this.count <= time_count) {
                        this.count--;
                      } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                      }
                    }, 1000);
                  }
                }
              })
              .catch((err) => {
                
              });
          }
        })
        .catch((err) => {
          
        });
    },

    //检验验证码
    getVerify() {
      this.axios({
        method: "get",
        url: "/register/cellphone",
        params: {
          captcha: this.code,
          phone: this.phone,
          password: this.password,
          nickname: this.nickName,
        },
      })
        .then((res) => {
          
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

// 导航栏
/deep/.van-nav-bar__text {
  color: #464647;
  font-size: 16px;
  font-weight: 600;
}

/deep/.van-nav-bar .van-icon {
  color: #464647;
  font-weight: 600;
}

//注册
.main {
  width: 100%;
  position: relative;
  top: 10px;
}

/deep/.van-button--round {
  width: 90%;
  margin: auto;
  position: relative;
  top: 100px;
}

/deep/.van-button--info {
  color: #fff;
  background-color: #db2b1f;
  border-color: #db2b1f;
}

/deep/.van-button--primary {
  color: #fff;
  background-color: #db2b1f;
  border-color: #db2b1f;
}
</style>